<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page session="false" %>
<html>
<head>
	<title>Home</title>
	<script src="resources/static/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="http://static.opentok.com/v0.91/js/TB.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" charset="utf-8">
	var sessionData;
	var session;
	function connctSession(){
			TB.setLogLevel(TB.DEBUG); 
			session = TB.initSession('${sessionId}');			
			session.addEventListener('sessionConnected', sessionConnectedHandler);
		    session.addEventListener('streamCreated', streamCreatedHandler);
		     TB.addEventListener("exception", exceptionHandler);
		     session.connect(${apiKey}, '${token}');
	}
	
	function sessionConnectedHandler(event){
			alert("in session connected handler");
		      subscribeToStreams(event.streams); 
			  session.publish();
	}
	
	function streamCreatedHandler(event) {
	      // Subscribe to any new streams that are created
	      subscribeToStreams(event.streams);
	    }
	function exceptionHandler(event){
		 TB.log(event.message);
		alert('in exception event');
	}
	
	function subscribeToStreams(streams) {
	      for (var i = 0; i < streams.length; i++) {
	        // Make sure we don't subscribe to ourself
	        if (streams[i].connection.connectionId == session.connection.connectionId) {
	          return;
	        }
	        var div = document.createElement('div');
	        div.setAttribute('id', 'stream' + streams[i].streamId);
	        document.body.appendChild(div);

	        // Subscribe to the stream
	        var subscribeProps = {height:240, width:320};
	        session.subscribe(streams[i], div.id);
			 $('#publisherDiv').html("");
	      }
	    }
	
	</script>
</head>
<body onLoad="connctSession()">
<h1>
</h1>
<div id="publisherDiv">
Waiting for publisher to start publishing.
</div>
<div id="sessionDiv">
</div>
</body>
</html>
